<template>
  <div class="edit">
    <div class="edit-header flex">
      <div class="title" @click="$router.push('/dashboard/monitor')">返回首页</div>
      <div style="position: relative">
        <Switch @mouseenter="mouseenter" :barData="meau" @click="switchClick" />
        <div
          class="header-count grid-container"
          :style="{ marginLeft: `${switchData.type * 60}px` }"
          v-show="show"
          @mouseenter="show = true"
          @mouseleave="show = false"
        >
          <div
            v-for="item in routine"
            :key="item.type"
            class="grid-item1"
            @click="switchClick(item)"
          >
            <img alt="" :src="item.src" style="width: 100%" />
            <div style="width: 100%; text-align: center">
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="edit-content">
      <div class="drawing-box">
        <Drawer ref="drawer" />
      </div>
      <div class="edit-style">
        <SetUp />
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import { meau } from "./confing";
import Switch from "../../components/switch/switch";
import Drawer from "./components/drawing/drawing.vue";
import SetUp from "./components/styleTab/index.vue";
import card from "@/components/card/card.vue";
import { routine } from "./confing";
export default defineComponent({
  components: {
    Switch,
    Drawer,
    SetUp,
    card,
  },
  setup() {
    const state = reactive({
      switchData: {
        type: 0,
        name: "常规",
      },
      show: false,
      drawer: null,
    });
    const mouseenter = (value: { id: number; name: string } | false) => {
      if (value) {
        state.switchData.type = value.id;
        state.switchData.name = value.name;
        if (value.id === 0) {
          state.show = true;
        } else {
          state.show = false;
        }
      } else {
        state.show = false;
      }
    };
    const switchClick = (value: { type: string; name: string }) => {
      if (value.type !== "0") {
        (state.drawer as any).addData(value.type, value.name);
      }
    };
    const onmouseout = () => {
      state.show = false;
    };
    return {
      mouseenter,
      meau,
      ...toRefs(state),
      onmouseout,
      switchClick,
      routine,
    };
  },
});
</script>
<style lang="less" scoped>
@import "./index.less";
</style>
